<template>
  <div class="app-container">
    <!-- 不是法规的渲染 -->
    <div class="failt-box">
      <div class="title">
        <h1>{{ title }}</h1>
      </div>
      <!-- 详细渲染 -->
      <ul>
        <!-- test类是为了触发transformNum数算属性 transformNum的位置 @/wss/utils/wss.js -->
        <li
          style="margin-bottom: 20px"
          :class="{
            test: t.idStr.split((transformNum = t)),
            haveOpinin: t.comment,
          }"
          v-for="(t, parentIndex) in detailList"
          :key="parentIndex"
        >
          <template v-if="t.type === '1'">
            <div v-for="(subIten, index) in t.content" :key="index">
              <div class="contentText-title">
                <Reader :obj="t"></Reader>
              </div>
            </div>
          </template>
          <template v-else>
            <el-image
              style="width: 500px"
              :src="t.url"
              :preview-src-list="[t.url]"
            >
            </el-image>
          </template>
          <!-- 是否有评论 -->
          <div class="reason" v-for="o in OpinionFnlist" :key="o.id">
            <template v-if="o && t.id == o.endItemId">
              <div>
                <div class="DefailReason">
                  <h2>失败原因</h2>
                  <span v-if="haveOpininArr.includes(t.id - 0)">{{
                    t.id
                  }}</span>
                  <span class="updateTime">更新时间{{ o.updatedTime }}</span>
                </div>
                <div class="DefailText">{{ o.opinion }}</div>
              </div>
            </template>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 头条的详细
import { getLawInfoApi } from "@/wss/api/doc/law.js";
import Reader from "@/wss/components/reader.vue";
console.log(Reader, "reader");
import {
  getDetailApi,
  searchReviewByIdApi,
  getVerifyDocInfoDocIdApi,
} from "@/wss/api/ContentReview";

export default {
  components: { Reader },
  props: {},

  data() {
    return {
      title: "",
      haveOpininArr: [],
      detailList: [],
      OpinionFnlist: [],
      newData: [],
    };
  },

  methods: {
    // 获取详细信息
    async getTopInfoFn() {
      let { data, code } = await getLawInfoApi({ id: this.$route.query.id });
      // console.log(, "data");

      if (code === 200) {
        this.title = data.title;
        this.detailList = data.info;
        console.log(this.detailList, "法规失败原因中的列表");
      }
    },

    // 去重复
    TorepeatFn(data) {
      this.haveOpininArr = [...new Set(data)];
      console.log(this.haveOpininArr, "haveOpininArr");
    },

    // 获取意见列表
    // async getOpinionFnlist() {
    //   let { data } = await searchReviewByIdApi({ id: this.$route.query.id });

    //   let result = await getVerifyDocInfoDocIdApi({ id: data.idStr });
    //   let opinion = await getDetailApi({
    //     docId: result.data.docIdStr,
    //     verifyId: result.data.idStr,
    //   });

    //   let range = null;
    //   let start = null;
    //   let end = null;
    //   console.log(opinion, "意见");
    //   opinion.data.forEach((item) => {
    //     // 获取区间
    //     start = Number(item.startItemId.split("_")[1]) || 1;

    //     end = Number(item.endItemId.split("_")[1]);

    //     range = end - start;

    //     // 获取绝对值
    //     range = Math.abs(range);
    //     console.log(range);
    //     for (let index = 0; index <= range; index++) {
    //       // 是否为整数
    //       if (start < end) {
    //         this.haveOpininArr.push(start + index);
    //       } else {
    //         this.haveOpininArr.push(start + index);
    //       }
    //     }
    //   });
    //   // 数组去重

    //   this.TorepeatFn(this.haveOpininArr);
    //   this.OpinionFnlist = opinion.data;
    //   console.log(this.OpinionFnlist, "endItemId");
    // },
  },
  async mounted() {
    //此函数再src/wss/utils/wss.js

    await this.getTopInfoFn();
    await this.getOpinionFnlist(this, this.detailList);
    // // 查询esId
    // let { data } = await searchReviewByIdApi({ id: this.$route.query.id });
    // let result = await getVerifyDocInfoDocIdApi({ id: data.idStr });
    // let opinion = await getDetailApi({
    //   docId: result.data.docIdStr,
    //   verifyId: result.data.idStr,
    // });
    // console.log(opinion, "opinion");
  },
};
</script>

<style lang="scss"  scoped >
.title {
  text-align: center;
  font-family: "MicrosoftYaHei", "Microsoft YaHei";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #e37709;
}

.isTitle {
  margin-left: 30px;
  list-style: circle;
}
li {
  list-style: none;
}

ul {
  padding: 0px;
}
.lineItem {
  list-style: none;
  margin: 20px 0px;
  font-size: 12px;
  position: relative;
}
.selectItem {
  cursor: pointer;
  position: absolute;
  left: 0px;
  display: inline-block;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: black;
  height: 50px;
  width: 100px;
  text-align: center;
  line-height: 50px;
}
.div {
  margin: 10px 0px;
}

.el-row {
  margin-bottom: 20px;
  height: 100px;
  background-color: white;
}
.echoText {
  margin-top: 30px;
  background: #cccc;
  padding: 30px;
}
.submitPinion {
  font-weight: 400;
  font-size: 13px;
  height: 80px;
  color: white;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  background-color: black;
  position: absolute;
  width: 200px;
  z-index: 1000;
  line-height: 80px;
}
.DefailReason {
  align-items: center;
  display: flex;

  .updateTime {
    margin-left: 20px;
  }
}
.DefailText {
  min-height: 50px;
}
</style>